<template>
  <div class="home">
    <!-- 运营数据 -->
    <div class="operational-data back-white pad-bor">
      <div class="display space">
        <div class="font16">运营数据</div>
        <div class="font12 color8c">2021年8月19日</div>
      </div>
      <div class="qianjia-order display space">
        <div>
          <div class="font14">支付订单金额</div>
          <div class="num">0</div>
          <div class="font12 color8c mar7">昨日：0</div>
          <div class="font12 color8c">
            同比上周：<span :class="percentage_color">0%</span>
          </div>
        </div>
        <div>
          <div class="font14">新增用户</div>
          <div class="num">0</div>
          <div class="font12 color8c mar7">昨日：0</div>
          <div class="font12 color8c">
            同比上周：<span :class="percentage_color">7.66%</span>
          </div>
        </div>
        <div>
          <div class="font14">浏览量</div>
          <div class="num">0</div>
          <div class="font12 color8c mar7">昨日：0</div>
          <div class="font12 color8c">
            同比上周：<span :class="percentage_color">0%</span>
          </div>
        </div>
        <div>
          <div class="font14">访客数</div>
          <div class="num">0</div>
          <div class="font12 color8c mar7">昨日：0</div>
          <div class="font12 color8c">
            同比上周：<span :class="percentage_color">5.42%</span>
          </div>
        </div>
        <div>
          <div class="font14">店铺数</div>
          <div class="num">0</div>
          <div class="font12 color8c mar7">昨日：0</div>
          <div class="font12 color8c">
            同比上周：<span :class="percentage_color">0%</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 当日订单金额 -->
    <div class="order-money back-white pad-bor display space">
      <div class="today-money">
        <div>当日订单金额</div>
        <div style="margin-top: 15px">
          ￥<span style="font-weight: 500; font-size: 20px">0</span>
        </div>
      </div>
      <div class="order-num display">
        <div>
          <div class="font14">当日订单数</div>
          <div class="num1">0</div>
          <div class="font12 color8c">
            同比上周：<span :class="percentage_color">5.42%</span>
          </div>
          <div
            style="background: pink; width: 100%; height: 100px; margin: 10px 0"
          ></div>
          <div class="font14">当月订单数</div>
          <div class="num1">20</div>
          <div class="font12 color8c">
            同比上月：<span :class="percentage_color">5.42%</span>
          </div>
        </div>
        <div>
          <div class="font14">当日支付人数</div>
          <div class="num1">0</div>
          <div class="font12 color8c">
            同比上周：<span :class="percentage_color">5.42%</span>
          </div>
          <div
            style="background: blue; width: 100%; height: 100px; margin: 10px 0"
          ></div>
          <div class="font14">当月支付人数</div>
          <div class="num1">20</div>
          <div class="font12 color8c">
            同比上月：<span :class="percentage_color">5.42%</span>
          </div>
        </div>
      </div>
    </div>

    <div class="back-white pad-bor">
      <zyj-line-chart></zyj-line-chart>
    </div>

    <!-- 成交用户 -->
    <div class="deal-box display">
      <div>
        <div class="display space">
          <div class="font-color30 font14">成交用户</div>
          <div class="font14 color8c">
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                <i class="el-icon-date"></i>
                最近30天<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    v-for="(item, index) in date_list"
                    :key="index"
                    >{{ item }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
        <div class="people-num">
          <div>
            <div class="visitor-num display">
              <div style="margin: 15px">
                <div class="font-color30 font14">访客人数</div>
                <div class="font-color30 font14 top15">728</div>
              </div>
              <div class="ti-1">访客</div>
            </div>
          </div>
          <div>
            <div class="place-num display">
              <div style="margin: 15px">
                <div class="font-color30 font14">下单人数</div>
                <div class="font-color30 font14 top15">78</div>
              </div>
              <div style="margin: 15px">
                <div class="font-color30 font14">下单金额</div>
                <div class="font-color30 font14 top15">45564.56</div>
              </div>
              <div class="ti-2">下单</div>
            </div>
          </div>
          <div>
            <div class="pay-num display">
              <div style="margin: 15px">
                <div class="font-color30 font14">支付人数</div>
                <div class="font-color30 font14 top15">728</div>
              </div>
              <div style="margin: 15px">
                <div class="font-color30 font14">支付金额</div>
                <div class="font-color30 font14 top15">8924.56</div>
              </div>
              <div style="margin: 15px">
                <div class="font-color30 font14">客单价</div>
                <div class="font-color30 font14 top15">24.56</div>
              </div>
              <div class="ti-3">支付</div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div class="display space">
          <div class="font-color30 font14">成交用户比</div>
          <div class="font14 color8c">
            <el-dropdown>
              <span class="el-dropdown-link">
                <i class="el-icon-date"></i>
                最近30天<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    v-for="(item, index) in date_list"
                    :key="index"
                    >{{ item }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
        <div>
          <div id="myEcharts" :style="{ width: '100%', height: '300px' }"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  getCurrentInstance,
  ref,
  onMounted,
  onUnmounted,
  reactive,
} from "vue";
import * as echarts from "echarts";
import ZyjLineChart from "@/components/zyj/ZyjLineChart.vue";

export default defineComponent({
  name: "Home",
  components: {
    ZyjLineChart,
  },

  setup() {
    const date_list = ref([
      "今天",
      "昨天",
      "最近7天",
      "最近30天",
      "本月",
      "本年",
    ]);
    const percentage_color = "";

    let echart = echarts;
    // 最近30天菜单点击事件
    const handleCommand = (e: any) => {
      console.log(e);
    };

    onMounted(() => {
      initChart();
    });

    onUnmounted(() => {
      echart.dispose;
    });
    // 基础配置一下Echarts
    function initChart() {
      let chart = echart.init(document.getElementById("myEcharts")!);
      // 把配置和数据放这里
      chart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          bottom: 10,
          left: "left",
          // data: ['老用户', '新成交用户']
        },
        series: [
          {
            type: "pie",
            radius: "65%",
            selectedMode: "single",
            data: [
              { value: 555, name: "新成交用户" },
              { value: 335, name: "老用户" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
      window.onresize = function () {
        //自适应大小
        chart.resize();
      };
    }

    return {
      date_list,
      handleCommand,
      initChart,
      percentage_color,
    };
  },
});
</script>

<style scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #8c8c8c;
}
.el-icon-arrow-down {
  font-size: 12px;
}

.top15 {
  margin-top: 15px;
}

.font-color30 {
  color: #303133;
}

.red {
  color: red;
}

.green {
  color: #39c15b;
}

.mar7 {
  margin-bottom: 7px;
}

.font14 {
  font-size: 14px;
}

.num {
  font-weight: 500;
  font-size: 26px;
  margin: 10px 0;
}

.num1 {
  font-weight: 500;
  font-size: 20px;
  margin: 10px 0;
}

.qianjia-order {
  margin-top: 25px;
}

.qianjia-order > div {
  width: 20%;
  border-right: 1px solid #e6ebf5;
  margin-right: 15px;
}

.qianjia-order:nth-last-child() {
  border: none;
}

.order-money span,
.operational-data span {
  font-style: oblique;
  font-weight: 600;
}

.font16 {
  font-size: 16px;
}

.color8c {
  color: #8c8c8c;
}

.font12 {
  font-size: 12px;
}

.home > div {
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  margin-bottom: 20px;
}

.home > div:last-child {
  box-shadow: none;
}

.display {
  display: flex;
}

.space {
  justify-content: space-between;
}

.pad-bor {
  padding: 20px;
  border-radius: 5px;
}

.back-white {
  background: white;
}

.order-money > div {
  width: 50%;
}

.order-num > div {
  width: 50%;
  padding-left: 15px;
}

.today-money {
  border-right: 1px solid #e6ebf5;
}

.deal-box > div {
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  background: white;
  border-radius: 5px;
  padding: 20px;
}

.deal-box > div:first-child {
  width: 60%;
  margin-right: 20px;
}

.deal-box > div:last-child {
  flex: 1;
}

.visitor-num {
  background: rgba(99, 149, 250, 0.1);
  margin-top: 15px;
  height: 84px;
}

.place-num {
  background: rgba(99, 218, 171, 0.1);
  margin: 3px 0;
  height: 84px;
}

.pay-num {
  background: rgba(101, 119, 152, 0.1);
  height: 84px;
}

.people-num > div {
  position: relative;
  width: 60%;
}

.ti-1 {
  position: absolute;
  top: 8px;
  right: -150px;
  background: #5b8ff9;
  text-align: center;
  line-height: 84px;
  color: #fff;
  width: 285px;
  height: 84px;
  -webkit-transform: perspective(5em) rotateX(-20deg);
  transform: perspective(5em) rotateX(-20deg);
}

.ti-2 {
  position: absolute;
  right: -100px;
  width: 180px;
  height: 90px;
  background: #5ad8a6;
  -webkit-transform: perspective(7em) rotateX(-20deg);
  transform: perspective(7em) rotateX(-30deg);
  margin-left: -52px;
  margin-top: 6px;
  text-align: center;
  line-height: 71px;
  color: #fff;
  font-size: 14px;
}

.ti-3 {
  position: absolute;
  right: -66px;
  width: 107px;
  height: 80px;
  background: #5d7092;
  -webkit-transform: perspective(7em) rotateX(-20deg);
  transform: perspective(3em) rotateX(-15deg);
  margin-left: -18px;
  margin-top: 12px;
  text-align: center;
  line-height: 61px;
  color: #fff;
  font-size: 14px;
}
</style>
